<template>
  <div class="demo">
    <div class="demo-title">额外操作</div>
    <div class="demo-content">
      <Radio.Group v-model:value="placement" style="margin-right: 8px">
        <Radio value="top">top</Radio>
        <Radio value="right">right</Radio>
        <Radio value="bottom">bottom</Radio>
        <Radio value="left">left</Radio>
      </Radio.Group>
      <Button type="primary" @click="showDrawer">Open</Button>
      <Drawer
        v-model:visible="open"
        class="custom-class"
        :placement="placement"
        root-class-name="root-class-name"
        :root-style="{ color: 'blue' }"
        style="color: red"
        title="Basic Drawer"
        @after-open-change="afterOpenChange"
      >
        <template #extra>
          <Button style="margin-right: 8px" @click="onClose">Cancel</Button>
          <Button type="primary" @click="onClose">Submit</Button>
        </template>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Radio from '@sscd/radio';
  import type { DrawerProps } from '@sscd/drawer';
  import Drawer from '@sscd/drawer';
  const open = ref<boolean>(false);
  const afterOpenChange = (bool: boolean) => {
    console.log('open', bool);
  };
  const placement = ref<DrawerProps['placement']>('left');
  const showDrawer = () => {
    open.value = true;
  };
  const onClose = () => {
    open.value = false;
  };
</script>
